<template>
    <div>
        <div>index</div>
        <LazyElButton type="warning">lazy button</LazyElButton>
        <ElButton :icon="ElIconEditPen" type="success">button</ElButton>

        <!-- 添加加载状态和错误显示 -->
        <div v-if="loading">加载中...</div>
        <div v-else-if="error">{{ error }}</div>
    </div>
</template>

<script setup>
import { getMovieListApi } from '~/apis/demo';

definePageMeta({
    name: 'index',
    title: '我的首页',
    layout: 'default'
});

const loading = ref(true);
const error = ref(null);

const getList = async () => {
    try {
        loading.value = true;
        error.value = null;

        const { data, error: fetchError } = await getMovieListApi({});

        if (fetchError) {
            throw fetchError;
        }

        console.log('获取到的数据:', data.value);
        // 在这里处理返回的数据

    } catch (err) {
        console.error('请求失败:', err);
        error.value = err.message || '获取电影列表失败';
    } finally {
        loading.value = false;
    }
};

onMounted(() => {
    getList();
});
</script>

<style lang="scss" scoped></style>